<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common" th:with="title='管理员登录日志'"></head>
<body class="hold-transition skin-blue sidebar-mini">
	<style>
		#queryTimeRange {
			width: 80%;
		}
	</style>
	<div th:include="main-header"></div>
	<div class="content-wrapper">
		<section class="content">
			<div class="panel panel-default">
				<div class="row">
					<div class="col-lg-12">
						<div class="panel-heading">登录日志查询</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-3">
									<div class="form-group">
										<input type="text" name="username" id="usernamesk"
											class="form-control" placeholder="用户名" />
									</div>
								</div>
								<div class="col-lg-3">
									<div class="form-group">
										<input type="text" name="ip" id="ip" class="form-control"
											placeholder="IP" />
									</div>
								</div>
								<div class="col-lg-3">
									<div class="form-group">
										<div class="form-control">
											<input type="text" readonly="readonly"
												name="queryTimeRange" id="queryTimeRange"
												placeholder="登录时间区间"
												style="border: 0px; display: block; float: left; line-height: 20px;" />
											<a style="float: right; display: block; line-height: 20px;"
												herf="javascript:void(0);" onclick="clearDateRange();"
												class="fa fa-fw fa-remove"></a>
										</div>
									</div>
								</div>
								<div class="col-lg-3">
									<div class="form-group">
										<button type="button" onclick="refresh();"
											class="btn btn-primary">查询</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="row">
					<div class="col-lg-12">
						<div class="panel-body">
							<table id="dataTable" class="table table-bordered table-hover"></table>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<div th:include="main-footer"></div>

	<script type="text/javascript">
		initBootstrapTable();
		function initBootstrapTable() {
			$('#dataTable').bootstrapTable({
				url : '/backstageloginlog/data',
				classes : 'table table-hover table-no-bordered',
				method : 'post',
				pagination : true,
				search : false,
				sidePagination : "server",
				minimumCountColumns : 10,
				clickToSelect : true,
				uniqueId : 'id',
				paginationPreText : "上一页",
				paginationNextText : "下一页",
				toolbar : '#toolbar',
				showRefresh : false,
				showToggle : false,
				showPaginationSwitch : false,
                striped:true,
				showColumns : false,
				pageNumber : 1,
				pageSize : 10,
				pageList : [ 10, 15, 20, 30 ],
				queryParamsType : '',
				contentType : "application/x-www-form-urlencoded",
				queryParams : queryParams,
				columns : [ {
					field : 'username',
					title : '用户名'
				}, {
					field : 'ip',
					title : '登录ip'
				}, {
					field : 'time',
					title : '登录时间',
					formatter : function(value) {
						return new Date(value).format("yyyy-MM-dd hh:mm:ss");
					}
				} ]
			});
		}

		function queryParams(params) {
			var temp = {
				pageSize : params.pageSize,
				pageNumber : params.pageNumber,
				username : $("#usernamesk").val(),
				ip : $("#ip").val(),
				queryTimeRange : $("#queryTimeRange").val()
			};
			return temp;
		}

		function rolesearch() {
			$('#dataTable').bootstrapTable('destroy');
			initBootstrapTable();
		}

		function refresh() {
			$('#dataTable').bootstrapTable('refresh');
		}
		$('#queryTimeRange').daterangepicker(
				{
					format : 'YYYY-MM-DD',
					autoUpdateInput : false,
					locale : {
						applyLabel : '确定',
						cancelLabel : '取消',
						fromLabel : '起始时间',
						toLabel : '结束时间',
						customRangeLabel : '自定义',
						daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
						monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
								'七月', '八月', '九月', '十月', '十一月', '十二月' ],
						firstDay : 1
					}
				},
				function(start, end, label) {//格式化日期显示框
					$('#queryTimeRange').val(
							start.format('YYYY-MM-DD') + '~'
									+ end.format('YYYY-MM-DD'));
				});
		function clearDateRange() {
			$('#queryTimeRange').val("");
		}
	</script>
</body>
</html>